<!--这个渲染程序将生成数据集作用域dataScope-->
<template>
  <ViewSkeleton v-if="show" :vnode="vnode" v-bind="allScope"></ViewSkeleton>
</template>

<script setup>
import {computed, onBeforeMount, ref} from 'vue';
import {deepMerge} from 'dlsjs';
import ViewSkeleton from './ViewSkeleton.vue';

const emits = defineEmits(['event'])
const props = defineProps({
  vnode: {
    type: Object,
    default: () => ({})
  },
  dataScope: {
    type: Object
  },
  readonly: {
    type: Boolean
  },
  expose: {
    type: Object,
    default: () => ({})
  }
})

/**
 * 初始化四种内部作用域
 * @property dataScope 数据作用域
 * @property funcScope 函数作用域
 * @property refScope 组件作用域 todo 未渲染的组件将不会出现在这里,编辑模式下引用弹窗将会引起不变
 * @property slotScope 插槽作用域 todo 待完善多插槽作用域情况
 */
const allScope = ref({
  dataScope: {},
  funcScope: {
    emits: emits
  },
  refScope: {},
  slotScope: {},
  renderScope: { __hide: [] }
})
/**
 * 初始化外部节点树区域
 * @type {Ref<any>}
 */
onBeforeMount(async () => {
  if (props.dataScope) allScope.value.dataScope = props.dataScope
  if (props.readonly) props.vnode['@permLevel'] = 'readonly'
})

function mergeData(obj) {
  deepMerge(allScope.value.dataScope, obj)
}

const show = ref(true)

function refresh() {
  show.value = false
  setTimeout(() => show.value = true, 0)
}

const contentRef  = computed(() => {
  return allScope.value.refScope[props.vnode.uuid]
})

defineExpose({allScope, mergeData, refresh, contentRef})
</script>
